<template>
  <div id="work-box" ref="workBox">
    <i-header></i-header>
    <!-- 菜单开始 -->
    <!-- 菜单结束 -->
    <h1 class="title">工作区</h1>
    <div class="main-cont mt10">
      <!-- 工具栏 -->
      <v-toolbar v-on:click="handleToolClick"></v-toolbar>
      <div class="table-cont mt10">
        <!-- 表格 -->
        <el-table :data="workspaceList"  v-loading="tableLoading" ref="table" :height="height">
          <el-table-column label="当前工作区" prop="IsCurrent" width="auto">
            <template slot-scope="scope">
              <span v-if="scope.row.IsCurrent" class="checked"></span>
            </template>
          </el-table-column>
          <el-table-column prop="Name" label="工作区名称" width="auto">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="gotoWorkspace(scope.row)"
                type="text"
                size="mini">{{ scope.row.Name }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="工作区ID" width="auto"></el-table-column>
          <el-table-column label="设置" width="auto">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="cloneWorkspace(scope.row)"
                type="text"
                size="mini">克隆</el-button>
              <el-button
                @click.native.prevent="delWorkspace(scope.row)"
                type="text"
                size="mini">删除</el-button>
              <el-button
                @click.native.prevent="setCurrentWorkspace(scope.row)"
                type="text"
                size="mini" v-if="!scope.row.IsCurrent">设置为默认工作区</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增/编辑弹窗 -->
    <v-dialog
      :title="editMode === 'ADD' ? '新建工作区':'克隆工作区'"
      :isVisible="editDialogShow"
      name="workDialog"
      @close="closeDialog">
      <template slot="dialog-cont">
        <el-form :model="workspaceForm" :rules="workRules" ref="workspaceForm" class="dialog-main dialogForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item :label="editMode === 'ADD' ? '工作区ID' : '目标工作区ID'" prop="Id" >
                <el-input v-model="workspaceForm.Id" placeholder="请输入工作区ID"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="editMode === 'ADD' ? '工作区名称' : '目标工作区名称'" prop="Name">
                <el-input v-model="workspaceForm.Name" placeholder="请输入工作区名称"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" v-if="editMode === 'CLONE'">
            <el-col :span="12">
              <el-form-item label="源工作区ID">
                <el-input v-model="sourceId" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="resetForm" size="mini">重置</el-button>
          <el-button @click="closeDialog('workDialog')" size="mini">关闭</el-button>
          <el-button type="primary" @click="submitForm" size="mini">确定</el-button>
        </div>
      </template>
    </v-dialog>
  </div>
</template>
<script>
  import iHeader from '../comm/iHeader/iHeader'
  import VToolbar from '../comm/iToolbar/iToolbar'
  import VDialog from '../comm/iDialog/iDialog'
  import { nextPage } from '../../../assets/js'
  import { mapMutations, mapState } from 'vuex'
  import { mixinParams } from '../../../assets/js/iapMixin'
  import {
    QUERY_WORKSPACE_LIST,
    GOTO_WORKSPACE,
    ADD_WORKSPACE,
    CLONE_WORKSPACE,
    DELETE_WORKSPACE,
    SET_WORKSPACE
  } from '../../../api/url'
  import ajax from '../../../api/ajax/ajax'
  export default {
    name: 'workspace',
    components: {
      iHeader,
      VToolbar,
      VDialog
    },
    mixin: [mixinParams],
    data () {
      return {
        editMode: 'ADD',
        editDialogShow: false,
        height: null,
        workspaceList: [],
        workspaceForm: {},
        workRules: {
          Id: [
            { required: true, message: '工作区ID不能为空', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9.]*$/, message: '工作区ID只能由字母、数字和.组成', trigger: 'blur' }
          ],
          Name: [
            { required: true, message: '工作区名称不能为空', trigger: 'blur' }
          ]
        },
        tableLoading: true,
        sourceId: ''
      }
    },
    computed: {
      ...mapState([
        'appId'
      ])
    },
    methods: {
      ...mapMutations([
        'pd_updateWorkspaceId',
        'pd_updateWorkspaceName',
        'pd_updateAppId'
      ]),
      // 工具栏操作
      handleToolClick (oprType) {
        switch (oprType) {
          case 'add':
            this.addWorkspace()
            break
          default:
            break
        }
      },
      // 获取工作区列表
      getWorkspaceList () {
        let getData = {
          AppId: this.appId
        }
        ajax.get(QUERY_WORKSPACE_LIST, getData).then(res => {
          if (res.Code === 0) {
            if (res.Workspaces) {
              this.workspaceList = JSON.parse(JSON.stringify(res.Workspaces))
            } else {
              this.workspaceList = []
            }
          }
          this.tableLoading = false
        })
      },
      // 进入工作区
      gotoWorkspace (data) {
        ajax.get(GOTO_WORKSPACE, {id: data.Id}).then(res => {
          if (res.Code === 0) {
            this.pd_updateWorkspaceId(data.Id)
            this.pd_updateWorkspaceName(data.Name)
            nextPage('/home/materialMgr')
          }
        })
      },
      // 新增工作区
      addWorkspace () {
        this.editMode = 'ADD'
        this.editDialogShow = true
      },
      // 克隆工作区
      cloneWorkspace (data) {
        this.editMode = 'CLONE'
        this.editDialogShow = true
        this.sourceId = data.Id
      },
      // 删除工作区
      delWorkspace (data) {
        this.$confirm('确定要删除该工作区吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let rmdata = {
            id: data.Id
          }
          ajax.get(DELETE_WORKSPACE, rmdata).then(res => {
            if (res.Code === 0) {
              this.getWorkspaceList()
              this.$message({
                type: 'success',
                message: '工作区删除成功'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      // 设置为当前工作区
      setCurrentWorkspace (data) {
        this.$confirm('确定要设置该工作区为当前工作区吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = {
            Id: data.Id,
            AppId: this.AppId
          }
          ajax.post(SET_WORKSPACE, postData).then(res => {
            this.getWorkspaceList()
            if (res.Code === 0) {
              this.$message({
                type: 'success',
                message: '当前工作区设置成功'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      // 初始化表单
      initForm () {
        this.$refs.workspaceForm.resetFields()
        this.workspaceForm = {}
      },
      // 重置表单域
      resetForm () {
        this.initForm()
      },
      // 关闭弹窗
      closeDialog (name) {
        this.initForm()
        this.editDialogShow = false
      },
      // 提交表单
      submitForm () {
        this.$refs.workspaceForm.validate((valid) => {
          if (valid) {
            let postData = {
              Id: this.workspaceForm.Id,
              Name: this.workspaceForm.Name,
              AppId: this.appId
            }
            if (this.editMode === 'ADD') {
              ajax.post(ADD_WORKSPACE, postData).then(res => {
                if (res.Code === 0) {
                  this.closeDialog()
                  this.getWorkspaceList()
                  this.$message({
                    type: 'success',
                    message: '新工作区创建成功'
                  })
                }
              })
            } else {
              postData.CloneFrom = this.sourceId
              ajax.post(CLONE_WORKSPACE, postData).then(res => {
                if (res.Code === 0) {
                  this.closeDialog()
                  this.getWorkspaceList()
                  this.$message({
                    type: 'success',
                    message: '工作区克隆成功'
                  })
                }
              })
            }
          } else {
            return false
          }
        })
      }
    },
    created () {
      if (!this.appId) {
        let appId = sessionStorage.getItem('appId')
        this.pd_updateAppId(appId)
      }
      this.$nextTick(() => {
        this.height = this.$refs.workBox.offsetHeight - 138
        this.getWorkspaceList()
      })
    }
  }
</script>
<style lang="stylus">
  #work-box
    height 100%
    background #f5f5f5
    overflow hidden
    .el-table--border::after,
    .el-table--group::after,
    .el-table::before
      background #fff
    .checked
      display block
      margin-left 15px
      width 32px
      height 32px
      background url('') no-repeat center center
    .title
      height 60px
      padding 15px
      line-height 30px
      font-size 18px
      font-weight normal
      background #fff
    .mt10
      margin-top 10px
</style>
